<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '添加分类' : '编辑分类'" width="45%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="分类名称：">
					<el-input v-model="form.categoryName" placeholder="输入分类名称"></el-input>
				</el-form-item>

				<el-form-item label="分类排序：">
					<el-input v-model="form.weight" placeholder="输入分类排序"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import { addCategory } from '/@/api/api';

const form = ref({});
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

const dialogVisible = ref(false);

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			if (!props.isAdd) {
				form.value = JSON.parse(JSON.stringify(props.row));
			}
		}
	}
);

async function submit() {
	let { code, data } = await addCategory({
		...form.value,
	});
	if (code == 200) {
		ElMessage.success('操作成功');
		handleClose();
	}
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
